본문으로 건너뛰기

불필요한 Props 복사와 연산 예시

React 컴포넌트를 개발할 때 종종 Props를 복사하거나 불필요한 연산을 수행하는 경우가 발생합니다. 이러한 행위는 코드의 가독성을 떨어뜨리고 성능 저하를 유발할 수 있습니다. 이번 글에서는 불필요한 Props 복사와 연산의 예시를 통해 주의해야 할 점을 설명하고, 올바른 코드 작성법을 제시하겠습니다.

불필요한 Props 복사란?​

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 사용되는 객체입니다. 이 객체는 읽기 전용으로, 자식 컴포넌트에서 Props를 변경할 수 없습니다. 하지만 개발 중 종종 Props 객체를 복사하여 새로운 객체를 생성하는 실수를 저지를 수 있습니다. 이러한 행위는 불필요할 뿐만 아니라 메모리 낭비를 초래할 수 있습니다.

예시 코드​

다음은 불필요하게 Props를 복사하는 잘못된 예시입니다.

function MyComponent(props) {
  const newProps = { ...props }; // 불필요한 복사

  return (
    <div>
      <p>{newProps.title}</p>
      <p>{newProps.content}</p>
    </div>
  );
}

위 코드에서 newProps는 props를 복사한 것입니다. 하지만, props 자체를 그대로 사용해도 무방합니다.

올바른 코드​

불필요한 복사를 제거한 올바른 코드입니다.

function MyComponent(props) {
  return (
    <div>
      <p>{props.title}</p>
      <p>{props.content}</p>
    </div>
  );
}

불필요한 연산 예시​

Props를 통해 전달된 데이터를 처리할 때, 불필요한 연산을 수행하는 경우가 있습니다. 이러한 연산은 컴포넌트의 렌더링 성능을 저하시킬 수 있습니다.

예시 코드​

다음은 불필요한 연산을 수행하는 예시입니다.

function SumComponent(props) {
  const numbers = props.numbers;
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }

  return <div>Sum: {sum}</div>;
}

위 코드에서는 매 렌더링마다 numbers 배열의 합을 계산합니다. props.numbers가 변경되지 않는 한, 불필요한 연산입니다.

올바른 코드​

메모이제이션을 사용하여 불필요한 연산을 방지할 수 있습니다.

import { useMemo } from 'react';

function SumComponent(props) {
  const sum = useMemo(() => {
    return props.numbers.reduce((acc, num) => acc + num, 0);
  }, [props.numbers]);

  return <div>Sum: {sum}</div>;
}

위 코드에서는 useMemo를 사용하여 props.numbers가 변경될 때만 합계를 재계산합니다. 이를 통해 불필요한 연산을 줄일 수 있습니다.

더 알아보기​

  • React.memo: 컴포넌트의 렌더링 성능을 최적화하는 방법으로, React.memo에 대해 더 알아보세요.
  • useCallback: 콜백 함수의 메모이제이션을 통해 불필요한 렌더링을 방지하는 방법을 알아보세요.
  • PureComponent: 클래스형 컴포넌트에서 렌더링 최적화를 위한 PureComponent의 사용법을 살펴보세요.

내용 요약과 다음 주제​

이 글에서는 불필요한 Props 복사와 연산의 예시를 통해 코드 가독성과 성능을 저해하는 요소들을 살펴보고, 이를 피하는 방법을 제시했습니다. 다음 주제인 PropTypes를 사용한 타입 확인과 기본값 설정에서는 컴포넌트의 Props 타입을 검증하고 기본값을 설정하는 방법에 대해 다룰 것입니다.